<template>
  <view class="guide-container">
    <!-- 顶部图片 -->
    <image :src="guideData.banner" mode="aspectFill" class="banner-image"></image>

    <!-- 标题区域 -->
    <view class="title-section">
      <text class="title">{{guideData.title}}</text>
      <text class="subtitle">{{guideData.subtitle}}</text>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <view class="section" v-for="(section, index) in guideData.sections" :key="index">
        <view class="section-title">
          <text class="section-title-text">{{index+1}}. {{section.title}}</text>
        </view>
        <view class="section-content">
          <text class="section-text">{{section.content}}</text>
          <image v-if="section.image" :src="section.image" mode="widthFix" class="section-image"></image>
        </view>
      </view>
    </view>

    <!-- 注意事项 -->
    <view class="tips-section" v-if="guideData.tips && guideData.tips.length">
      <view class="tips-title">注意事项</view>
      <view class="tips-list">
        <view class="tip-item" v-for="(tip, index) in guideData.tips" :key="index">
          <text class="tip-dot">•</text>
          <text class="tip-text">{{tip}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        guideId: '',
        guideData: {
          banner: '',
          title: '',
          subtitle: '',
          sections: [],
          tips: []
        }
      }
    },
    onLoad(options) {
      if (options.id) {
        this.guideId = options.id;
        this.loadGuideData();
      }
    },
    methods: {
      async loadGuideData() {
        try {
          const fetchData = uniCloud.importObject('fetch_data');
          const res = await fetchData.getGuideDetail({
            id: this.guideId
          });

          if (res.errCode === 0) {
            this.guideData = res.data.data[0];
            // 设置页面标题
            uni.setNavigationBarTitle({
              title: this.guideData.title
            });
          } else {
            throw new Error(res.errMsg);
          }
        } catch (error) {
          console.error('获取指南数据失败：', error);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        }
      }
    }
  }
</script>

<style lang="scss">
  .guide-container {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 30rpx;

    .banner-image {
      width: 100%;
      height: 400rpx;
    }

    .title-section {
      padding: 30rpx;
      background: #fff;
      margin-bottom: 20rpx;

      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }

      .subtitle {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }

    .content-section {
      background: #fff;
      padding: 0 30rpx;

      .section {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #eee;

        &:last-child {
          border-bottom: none;
        }

        .section-title {
          margin-bottom: 20rpx;

          .section-title-text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
        }

        .section-content {
          .section-text {
            font-size: 28rpx;
            color: #666;
            line-height: 1.8;
            margin-bottom: 20rpx;
            display: block;
          }

          .section-image {
            width: 100%;
            border-radius: 12rpx;
            margin: 20rpx 0;
          }
        }
      }
    }

    .tips-section {
      margin-top: 20rpx;
      background: #fff;
      padding: 30rpx;

      .tips-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .tips-list {
        .tip-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 16rpx;

          .tip-dot {
            color: #c00000;
            margin-right: 10rpx;
            font-size: 32rpx;
          }

          .tip-text {
            flex: 1;
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }
</style>